import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
import type { GameStats, CategoryStats } from '@/types/vocabulary';
import { Trophy, Target, Clock, Award } from 'lucide-react';

interface StatsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  gameStats: GameStats;
  categoryStats: CategoryStats;
}

const StatsDialog: React.FC<StatsDialogProps> = ({ open, onOpenChange, gameStats, categoryStats }) => {
  const gamePerformanceData = [
    {
      name: '单词配对',
      游戏次数: gameStats.matching.totalGames,
      平均用时: gameStats.matching.averageTime,
      最佳用时: gameStats.matching.bestTime,
    },
    {
      name: '拼写练习',
      游戏次数: gameStats.spelling.totalGames,
      准确率: gameStats.spelling.accuracy,
    },
    {
      name: '快速测验',
      游戏次数: gameStats.quiz.totalGames,
      平均分数: gameStats.quiz.averageScore,
      最高分数: gameStats.quiz.bestScore,
    },
  ];

  const categoryData = Object.entries(categoryStats).map(([category, stats]) => ({
    类别: category,
    准确率: stats.accuracy,
    尝试次数: stats.attempted,
    正确次数: stats.correct,
  }));

  const hasGameData = gameStats.matching.totalGames > 0 || gameStats.spelling.totalGames > 0 || gameStats.quiz.totalGames > 0;
  const hasCategoryData = Object.keys(categoryStats).length > 0;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-2xl flex items-center gap-2">
            <Trophy className="w-6 h-6 text-yellow-500" />
            学习掌握情况
          </DialogTitle>
          <DialogDescription>
            查看您的游戏表现和各类别词汇掌握情况
          </DialogDescription>
        </DialogHeader>

        <Tabs defaultValue="game" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="game">游戏表现统计</TabsTrigger>
            <TabsTrigger value="category">类别掌握情况</TabsTrigger>
          </TabsList>

          <TabsContent value="game" className="space-y-4">
            {!hasGameData ? (
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center py-12">
                    <Trophy className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                    <p className="text-gray-500 text-lg">还没有游戏记录</p>
                    <p className="text-gray-400 text-sm mt-2">开始玩游戏来查看您的表现统计吧！</p>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm font-medium flex items-center gap-2">
                        <Clock className="w-4 h-4 text-blue-600" />
                        单词配对
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">游戏次数</span>
                          <span className="font-semibold">{gameStats.matching.totalGames}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">平均用时</span>
                          <span className="font-semibold">{gameStats.matching.averageTime}秒</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">最佳用时</span>
                          <span className="font-semibold text-green-600">{gameStats.matching.bestTime}秒</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm font-medium flex items-center gap-2">
                        <Target className="w-4 h-4 text-green-600" />
                        拼写练习
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">游戏次数</span>
                          <span className="font-semibold">{gameStats.spelling.totalGames}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">总单词数</span>
                          <span className="font-semibold">{gameStats.spelling.totalWords}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">准确率</span>
                          <span className="font-semibold text-green-600">{gameStats.spelling.accuracy}%</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm font-medium flex items-center gap-2">
                        <Award className="w-4 h-4 text-purple-600" />
                        快速测验
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">游戏次数</span>
                          <span className="font-semibold">{gameStats.quiz.totalGames}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">平均分数</span>
                          <span className="font-semibold">{gameStats.quiz.averageScore}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm text-gray-600">最高分数</span>
                          <span className="font-semibold text-purple-600">{gameStats.quiz.bestScore}</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>游戏表现对比</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={gamePerformanceData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="游戏次数" fill="#3b82f6" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </>
            )}
          </TabsContent>

          <TabsContent value="category" className="space-y-4">
            {!hasCategoryData ? (
              <Card>
                <CardContent className="pt-6">
                  <div className="text-center py-12">
                    <Target className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                    <p className="text-gray-500 text-lg">还没有类别统计数据</p>
                    <p className="text-gray-400 text-sm mt-2">开始学习不同类别的单词来查看掌握情况！</p>
                  </div>
                </CardContent>
              </Card>
            ) : (
              <>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {Object.entries(categoryStats).map(([category, stats]) => (
                    <Card key={category}>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-sm font-medium">{category}</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-2">
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-600">尝试次数</span>
                            <span className="font-semibold">{stats.attempted}</span>
                          </div>
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-600">正确次数</span>
                            <span className="font-semibold text-green-600">{stats.correct}</span>
                          </div>
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-600">准确率</span>
                            <span className="font-semibold text-blue-600">{stats.accuracy}%</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>类别准确率对比</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={categoryData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="类别" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="准确率" fill="#10b981" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>类别掌握雷达图</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <RadarChart data={categoryData}>
                        <PolarGrid />
                        <PolarAngleAxis dataKey="类别" />
                        <PolarRadiusAxis angle={90} domain={[0, 100]} />
                        <Radar name="准确率" dataKey="准确率" stroke="#8b5cf6" fill="#8b5cf6" fillOpacity={0.6} />
                        <Tooltip />
                      </RadarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </>
            )}
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
};

export default StatsDialog;
